<template>
  <div>
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="医生昵称" prop="doctorNickname">
        <el-select
          v-model="addForm.doctorNickname"
          placeholder="请选择医生昵称"
          filterable
          @change="handleFindDoctor"
          :disabled="props.form.id != 0"
        >
          <el-option
            v-for="item in props.doctorList"
            :key="item.id"
            :label="item.doctorNickname"
            :value="item.doctorNickname"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="医生账号" prop="doctorUsername">
        <el-alert
          :closable="false"
          :type="addForm.doctorNickname ? 'info' : 'warning'"
        >
          {{ addForm.doctorNickname ? addForm.doctorUsername : "请先选择医生" }}
        </el-alert>
      </el-form-item>
      <el-form-item label="设备编码">
        <el-alert :closable="false">
          {{ props.detailForm.deviceSn }}
        </el-alert>
      </el-form-item>
      <el-form-item label="设备分类">
        <el-alert :closable="false">
          {{ props.detailForm.categoryName }}
        </el-alert>
      </el-form-item>
      <el-form-item label="设备型号">
        <el-alert :closable="false">
          {{ props.detailForm.typeName }}
        </el-alert>
      </el-form-item>
      <el-form-item label="授权到期日期" prop="authExpireTime">
        <el-date-picker
          v-model="addForm.authExpireTime"
          type="date"
          placeholder="请选择时间"
          format="YYYY-MM-DD"
          value-format="x"
          :disabled-date="disabledDateStart"
        />
      </el-form-item>
    </el-form>

    <div class="fixed bottom-2 right-2">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ loading ? "提交中..." : "提 交" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { cloneDeep } from "lodash";
import { handleApiResponse } from "@/utils/request.js";
import {
  UpdateMqttAuthExpireTime,
  CreateMqttAuthCode,
} from "../../../../../wailsjs/go/api/DeviceApi";

onMounted(() => {
  if (props.form.id != 0) {
    addForm.value.id = props.form.id;
    addForm.value.doctorNickname = props.form.doctorNickname;
    addForm.value.doctorUsername = props.form.doctorUsername;
    addForm.value.authExpireTime = props.form.authExpireTime * 1000;
  } else {
    addForm.value.brandName = props.detailForm.brandName;
    addForm.value.typeName = props.detailForm.typeName;
    addForm.value.deviceSn = props.detailForm.deviceSn;
    addForm.value.categoryName = props.detailForm.categoryName;
    addForm.value.outCode = props.detailForm.outCode;
  }
});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
  form: {
    type: Object,
    default: () => {
      return {};
    },
  },
  doctorList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const addFormRef = ref(null);
const addForm = ref({
  doctorUsername: "",
  doctorNickname: "",
  authExpireTime: "",
});

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    loading.value = true;
    let form = cloneDeep(addForm.value);
    form.authExpireTime = form.authExpireTime / 1000;
    // setTimeout(() => {
    //   loading.value = false;
    //   handleCancel(1);
    // }, 2000);
    console.log(form);

    // ElMessage.info("紧急开发中...");
    if (props.form.id == 0) {
      handleApiResponse(() => CreateMqttAuthCode(form)).then((res) => {
        if (res.code == 0) {
          ElMessage.success("新增成功");
          handleCancel(1);
        }
      });
    } else {
      handleApiResponse(() => UpdateMqttAuthExpireTime(form)).then((res) => {
        if (res.code == 0) {
          ElMessage.success("修改成功");
          handleCancel(1);
        }
        loading.value = false;
      });
    }
  });
};
const handleCancel = (val = 0) => {
  emit("handleBack", val);
};

const handleFindDoctor = () => {
  addForm.value.doctorUsername =
    props.doctorList.find(
      (item) => item.doctorNickname == addForm.value.doctorNickname
    ).doctorUsername || "";
};
const rules = ref({
  doctorNickname: [{ required: true, message: "请选择医生昵称" }],
  doctorUsername: [{ required: false, message: "请选择医生账号" }],
  authExpireTime: [{ required: true, message: "请选择时间" }],
});

const disabledDateStart = (time) => {
  return time.getTime() <= new Date().getTime();
};
</script>

<style scoped lang="scss">
.el-alert {
  @apply px-2 py-1;
}
</style>